<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
    <title>Document</title>
</head>
<body>

</body>
</html>

<script>

    class MqttClient{
        constructor({hostname, port, clientId}) {
            this.mqttClient = new Paho.MQTT.Client(hostname, port, clientId);
            this.mqttoptions ={
                cleanSession: false,
                invocationContext: {host: hostname, port: port, path: '/web', clientId: clientId},
                keepAliveInterval: 60,
                onSuccess: this.mqttConnectOk,
                onFailure: this.mqttConnectFail,
                timeout: 5,
                useSSL: false
            };
            this.mqttClient.onMessageArrived = this.messageArrived;
            this.mqttClient.onConnectionLost = this.connectLost;
            console.log('开始进行mqtt链接');
            this.mqttClient.connect(this.mqttoptions);
        }


        mqttConnectOk = () => {
            console.log('WebSocket mqtt 连接成功!');
            console.log('开始订阅主题');
            this.mqttClient.subscribe('/ming/TEST/#');
            console.log('订阅完成');
        };
        mqttConnectFail = e => {
            console.log('MQTT连接失败,失败原因是', e);
        };

        messageArrived = message => {
            let data =`MQTT 收到topic 为 ${message.destinationName} 的消息，具体内容为: ${message.payloadString}, 消息服务等级为 ${message.qos}：`
            console.log(data);
        };
        connectLost = response => {
            console.log('MQTT 连接断开');


        };

    }


    new MqttClient({
        hostname: 'mq.tongxinmao.com',
        port:18832,
        clientId:"AAA"
    });


</script>